<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
    <!-- 直接从本地导入CSS，所以存在网络上的图标等样式不可用 -->
    <link rel="stylesheet" type="text/css" href="./css/element-ui-index.css" />
    <!-- 引入VUE -->
    <script src="js/vue.js"></script>
    <!-- 引入element-UI -->
    <script src="js/element-ui-lib-index.js"></script>
    <!-- 这个为从CDN内容分发网络Content Delivery Network引入 -->
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    /> -->
  </head>
  <body>
    <div class="container">
      <el-row>
        <el-col :span="18">
          <el-form :model="ruleForm" :rules="rules" :ref="ruleForm">
            <el-form-item v-model="ruleForm.pass" label="密码">
              <el-input> </el-input>
            </el-form-item>

            <el-form-item v-model="ruleForm.checkpass">
              <el-input> </el-input>
            </el-form-item>

            <el-form-item v-model="ruleForm.age">
              <el-input> </el-input>
            </el-form-item>

            <el-form-item v-model="ruleForm.age">
              <el-button>FromButton </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </body>

  <script>
    new Vue({
      el: ".container",

      data() {
        var checkAge = (rule, value, callback) => {
          if (!value) {
            return callback(new Error("年龄不能为空"));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error("请输入数字值"));
            } else {
              if (value < 18) {
                callback(new Error("必须年满18岁"));
              } else {
                callback();
              }
            }
          }, 1000);
        };
        var validatePass = (rule, value, callback) => {
          if (value === "") {
            callback(new Error("请输入密码"));
          } else {
            if (this.ruleForm.checkPass !== "") {
              this.$refs.ruleForm.validateField("checkPass");
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === "") {
            callback(new Error("请再次输入密码"));
          } else if (value !== this.ruleForm.pass) {
            callback(new Error("两次输入密码不一致!"));
          } else {
            callback();
          }
        };
        return {
          ruleForm: {
            pass: "",
            checkPass: "",
            age: "",
          },
          rules: {
            pass: [{ require: true, validator: validatePass, trigger: "blur" }],
            checkPass: [{}],
            age: [{}],
          },
        };
      },

      methods: {},
    });
  </script>
  <style>
    .container {
      width: 80vw;
      margin: 60px auto auto auto;
    }
  </style>
</html>
